<template>
  <div>
    <h1>computed计算属性</h1>
    <!-- total是一个变量，不是一个函数 -->
    <div>{{ total }}</div>
    <div>{{ totalPrice }}</div>
    <div>
      <p>
        <input type="text" v-model.number="a" placeholder="a" />
        <input type="text" v-model.number="b" placeholder="b" />
      </p>
      <p>{{ total }}</p>
    </div>
  </div>
</template>

<script>
// 一个数据, 依赖另外一些数据(data中的数据)计算而来的结果
export default {
  data() {
    return {
      a: 20,
      b: 20,
      list: [
        { id: 0, name: "帽子", price: 10 },
        { id: 1, name: "裤子", price: 120 },
        { id: 2, name: "袜子", price: 130 },
      ],
    };
  },
  // 计算属性total是一个变量(一个结果值)，而不是函数，不能调用
  // 监控到data的变化，函数会重新执行
  // 一定要有retrun
  computed: {
    total() {
      return this.a + this.b;
    },
    totalPrice() {
      // let sum = 0;
      // this.list.forEach((item) => {
      //   sum += item.price;
      // });
      // return sum;

      return this.list.reduce(function (acc, cur) {
        return (acc += cur.price);
      }, 0);
    },
  },
};
</script>

<style>
</style>